import React, { Component } from 'react';
// 导入list样式
import './Lubt.scss'

import { index_banner } from '../utils/api';

// 导入轮播图插件
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

class List extends Component {

    constructor(props){
        super(props)
        this.state={ 
            list:[]
        } //定义初始化状态
    }

    componentDidMount(){
        index_banner().then((res)=>{
            console.log(res.data);
            this.setState(this.state.list=res.data.list)
            // console.log("1111 "+this.state.list);
        })
    }
    render() {

        const settings = {
            dots: true,
            dotsClass: 'slick-dots1',//自定义指示器的样式
            // dots: {'dot-style':String},
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            height: 500
        };
        return (
            <div className='lbt6'>
                {
                    this.state.list.map((item,index)=>{
                     return(
                        // <div className='c1'>
                        //     <img src={item.pic} alt="" />
                           
                        // </div>

                         <div className='lbt6'>
                             {/* <h2> Single Item</h2> */}
                             <Slider {...settings}>
                                 <div>
                                     {/* <h3>1</h3> */}
                                     <div >
                                         <img src={item.pic} alt="" className='lbt1' />
                                     </div>
                                 </div>
                                 
                              
                                 

                             </Slider>
                         </div>
                
                     )
                    })
                // <div>
                //         <img src={item.pic} alt="" />
                // </div>
                }
            </div>
        
        );
    }
}

export default List;